<script lang="ts" setup name="Tenants">
import { tenantApi } from '@/api/index'

const tableData = ref([])
const queryForm = reactive({
  name: ''
})
const selectedTenant = ref<any>()
const initDialogForm = {
  id: '',
  name: '',
  domain: '',
  enabled: true,
}
const dialogForm = ref(initDialogForm)

const dialogVisible = ref(false)
enum DialogType { ADD, EDIT }
const dialogType = ref(DialogType.ADD)
const dialogTitle = computed(() => {
  return dialogType.value === DialogType.ADD ? '新增租户' : '编辑租户'
})
const searchTenant = async () => {
  const { data } = await tenantApi.searchTenantApi(queryForm)
  if (data.code === 200) {
    tableData.value = data.data
  } else {
    ElMessage.error(data.message)
  }
}

const addButtonClick = () => {
  dialogType.value = DialogType.ADD
  dialogVisible.value = true
}

const editButtonClick = (row: any) => {
  dialogType.value = DialogType.EDIT
  dialogVisible.value = true
  dialogForm.value = row
}

const submitForm = async () => {
  switch (dialogType.value) {
    case DialogType.ADD:
      await addTenant(); break;
    case DialogType.EDIT:
      await editTenant(); break;
  }
  
  dialogVisible.value = false
}

const addTenant = async () => {
  const { data } = await tenantApi.createTenantApi(dialogForm.value)
  if (data.code === 200) {
    searchTenant()
    ElMessage.success(data.message)
  } else {
    ElMessage.error(data.message)
  }
}

const editTenant = async () => {
  const { data } = await tenantApi.updateTenantApi(dialogForm.value)
  if (data.code === 200) {
    searchTenant()
    ElMessage.success(data.message)
  } else {
    ElMessage.error(data.message)
  }
}

const handleClose = (done: () => void) => {
  dialogForm.value = initDialogForm
  done()
}

onActivated(() => {
  searchTenant()
})
</script>

<template>
  <div h-full>
    <!-- 主体内容 -->
    <div h-full flex flex-col gap-col-4>
      <div flex-shrink-0>
        <el-form :model="queryForm" :inline="true">
          <el-form-item label="名称">
            <el-input v-model="queryForm.name" />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchTenant()">查询</el-button>
            <el-button type="primary">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div flex-shrink-0 text-end>
        <el-button type="primary" @click="addButtonClick()">新增</el-button>
        <el-button type="primary">批量删除</el-button>
      </div>
      <div flex-1 overflow-auto>
        <el-table :data="tableData" style="width: 100%" height="100%">
          <el-table-column type="selection" width="55" :selectable="selectedTenant" />
          <el-table-column fixed prop="name" label="名称" width="150" />
          <el-table-column prop="domain" label="域名" />
          <el-table-column prop="enabled" label="状态" width="80">
            <template #default="scope">
              <el-tag :type="scope.row.enabled ? 'success' : 'danger'">
                {{ scope.row.enabled ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="createTime" label="创建时间" />
          <el-table-column fixed="right" label="操作" min-width="120">
            <template #default="scope">
              <el-button link type="primary" size="small" @click.prevent="editButtonClick(scope.row)">
                编辑
              </el-button>
              <el-button link type="primary" size="small">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div flex-shrink-0>
        <el-pagination :page-size="20" :pager-count="11" layout="->,prev, pager, next" :total="1000" />
      </div>
    </div>

    <el-dialog v-model="dialogVisible" :title="dialogTitle" width="500" :before-close="handleClose">
      <el-form :model="dialogForm">
        <el-form-item label="名称">
          <el-input v-model="dialogForm.name" />
        </el-form-item>
        <el-form-item label="域名">
          <el-input v-model="dialogForm.domain" />
        </el-form-item>
        <el-form-item label="是否启用">
          <el-switch v-model="dialogForm.enabled" />
        </el-form-item>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm()">
            提交
          </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style scoped lang="scss"></style>